<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新表单</title>
</head>
<body>
<form action="#">
    <!-- color：定义选择颜色的表单，value值为选择的颜色 -->
    <input type="color">
    <!-- date：定义选择日期的表单，value值为选择的日期 -->
    <input type="date">
    <!-- email：定义输入电子邮箱的表单，提交时会验证是否匹配邮箱的规则 -->
    <input type="email">
    <!-- month：定义选择月份的表单 -->
    <input type="month">
    <!-- number：定义输入数字的表单，只能输入数字，在手机上聚焦会谭出数字键盘 -->
    <input type="number">
    <!-- tel：定义输入电话号码的表单，不局限于只能输入数字，在手机上聚焦会弹出数字键盘 -->
    <input type="tel">
    <!-- range：定义滑动条，value值是滑块在滑动条所在位置的报粉笔，最小是0，最大是100 -->
    <input type="range">
    <!-- search：定义搜索表单，在手机上聚焦时弹出键盘上的回车键变成搜索键 -->
    <input type="search">
    <!-- time：定义输入时间的表单 -->
    <input type="time">
    <!-- url：定义输入网址的表单，提交时会验证表单内容是否满足网址的规则 -->
    <input type="url">
    <!-- week：定义选择星期的表单 -->
    <input type="week">
    <button type="submit">提交</button>
</form>
<script src="./jquery-2.0.3/jquery-2.0.3.min.js"></script>
<script>
        // change事件：input值发生改变，并且失焦状态才会触发这个事件
        // $('input[type=color]').on('change',function(){
        //     var val = $(this).val();
        //     console.log(val);
        // })
        // input事件：只要input中的值发生改变就会实时触发这个事件
        $('input[type=color]').on('input',function(){
            var val = $(this).val();
            console.log(val);
        })

</script>
</body>
</html>